class List{
  constructor(){
      this.url = "http://localhost:3000/api";
      this.addbox = document.querySelector(".addbox");

      this.load();
      // 1. 绑定事件
      this.addEvent();
  }
  addEvent(){
      const that = this;
      // 利用事件委托，绑定添加购物车的点击事件
      this.addbox.addEventListener('click',function(eve){
          const e = eve || window.event;
          const target = e.target || e.srcElement;
          if(target.className === "add"){
              // 2. 获取当前商品的id
              that.id = target.parentNode.getAttribute("index")
              // console.log(that.id);
              // 3. 将数据存到本地存储中
              that.setLocal();
          }
      })
  }
  setLocal(){
      // 设定的数据的格式
      // 多个商品的数据：[{id:"i17234rufgiv",num:2},{id:,num:},{...},{},...]

      // 先读
      const goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];

      // 判断是否是第一次添加购物车
      if(goods.length < 1){
          // 第一次加入购物车：直接添加数据
          goods.push({
              id:this.id,
              num:1
          })
      }else{
          // 不是第一次加入购物车：
          // 遍历
          let i = 0;
          const flag = goods.some((val,idx)=>{
              i = idx;
              return val.id === this.id
          })
          // 判断本次添加的是否是新商品
          if(flag){
              // 是老商品：增加指定商品的数量
              goods[i].num++;
          }else{
              // 不是老商品：增加数据
              goods.push({
                  id:this.id,
                  num:1
              })
          }
      }
      
      // 再存回去
      localStorage.setItem("goods", JSON.stringify(goods))
  }
  load(){
      ajax({
          url:this.url,
          data:{
              type:"getGoods"
          },
          success:res=>{
              this.res = JSON.parse(res).msg;
              // this.render();
          }
      })
  }
  // render(){
  //     let str = "";
  //     this.res.forEach(val=>{
  //         str += `<div class="box" index="${val.proId}">
  //                     <img src="${val.img}" alt="">
  //                     <p>${val.proName}</p>
  //                     <span>${val.price}</span>
  //                     <input type="button" class="add" value="加入购物车">
  //                 </div>`
  //     })
  //     this.addbox.innerHTML = str;
  // }
}

new List();